<template>
		<view class="contain-main-box">
			<u-toast ref="uToast" />
			<navigationTop navigationTitle="我的">
				<template slot="right">
					<navigator url="/pages/changeUrl/index?isLogin=true" style="margin-right: 30rpx;">
						<u-icon name="setting" color="#eee" size="40"></u-icon>
					</navigator>
				</template>
			</navigationTop>
	<view class="main-bg">
		<!-- body start -->
		<view class="center-by">
			<!-- 头像start -->
			<view class="img-user">
				<navigator url="/pages/changeUrl/index?isLogin=true" hover-class="none" class="advan-naviTo">
					<image :src="$store.state.userInfo.photo"></image>
				</navigator>
				
			</view>
			<!-- 头像end -->
			<!-- 内容start -->
			<view class="form-box">
				<!-- 01 -->
				<view class="form-item">
					<view class="label">姓名</view>
					<view class="inp">{{userInfo.name||"-"}}</view>
				</view>
				<!-- 02 -->
				<view class="form-item">
					<view class="label">登录名</view>
					<view class="inp">{{userInfo.loginName||"-"}}</view>
				</view>
				<!-- 03 -->
				<!-- 04 -->
				<view class="form-item">
					<view class="label">联系电话</view>
					<view class="inp">{{userInfo.mobile||"-"}}</view>
				</view>
				<!-- 05 -->
				<view class="form-item">
					<view class="label">电子邮箱</view>
					<view class="inp">{{userInfo.email||"-"}}</view>
				</view>
				<!-- 06 -->
				<view class="form-item" style="margin-bottom: 60rpx;">
					<view class="label">角色</view>
					<view class="inp">{{userInfo.remarks||"-"}}</view>
				</view>
				<!-- end -->
			</view>
			<!-- 内容start -->
			
		</view>
	</view>
	</view>
</template>
<script>
	import navigationTop from "@/components/navigationTop/index.vue";
	export default {
		name:'homeTab',
		components:{navigationTop},
		data() {
			return {
				show:false,
				userInfo:{}
			}
		},
		mounted() {
			this.getData()
		},
		methods: {
			refreshData(){
				this.getData().then((res)=>{
					this.$refs.uToast.show({
						title: '更新成功',
						type: 'success',
						duration:1500
					})
				})
			},
			getData(){
				return new Promise((resolve,reject)=>{
					this.$http.httpRequest({
						methods:"get",
						url:this.$api.userList
					}).then((res)=>{
						uni.stopPullDownRefresh()
						if(!res){
							return uni.showToast({
									title: "服务器请求出错",
									icon:"none"
								})
						}
						resolve(res)
						this.$store.commit('set_userInfo',res.data.user);
						this.userInfo = {
							...this.$store.state.userInfo
						}
					}).catch((err)=>{
						uni.stopPullDownRefresh()
						reject(err)
						return uni.showToast({
								title: "服务器请求出错",
								icon:"none"
							})
					})
				})

			}
		}
	}
</script>

<style scoped lang="scss">
.own-name{
	padding: 52rpx 30rpx 0;
}
.center-by{
	padding: 30rpx;
	position: relative;
}
.center-by .img-user{
	width: 100%;height: 220rpx;
	margin: 0 auto;
	float: left;
	text-align: center;
	
	.advan-naviTo{
		display: inline-block;
		image{
			width: 220rpx;height: 220rpx;border-radius: 50%;display: block;
			box-shadow:  0 0 15rpx #999;
		}
	}
}
.form-box{
	margin-top: 110rpx;
	background: rgba(255,255,255,0.98);background-size: cover;border-radius: 30rpx;
	padding: 120rpx 95rpx;box-shadow: 0 0 30rpx rgba(33,44,103,0.2);
}
.form-item .label{color: #919297;font-size: 30rpx;height: 80rpx;line-height: 80rpx;}
.form-item .inp{color: #212c67;font-size: 30rpx;line-height: 60rpx;}
</style>
